<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>从数据库导入表单</title>
    <link th:href="@{/css/common/bootstrap.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/font-awesome.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/animate.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/style.css}" th:rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5></h5>
                </div>
                <div class="ibox-content">
                    <div id="toolbar">
                        <form class="form-inline" th:action="@{/sysTable/export}" method="post">
                            表名：
                            <input class="form-control" id="tableName" name="tableName" type="text"
                                   placeholder="请输入表名">
                            &nbsp;&nbsp;&nbsp;
                            <button type="button" class="btn btn-primary"
                                    onclick="$('#table_list').bootstrapTable('refresh');"><i class="fa fa-search"></i>查询
                            </button>
                        </form>
                    </div>
                    <div class="row row-lg">
                        <div class="col-sm-12">
                            <!-- Example Card View -->
                            <div class="example-wrap">
                                <div class="example">
                                    <div style="white-space: nowrap; overflow: hidden; overflow-x: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;">
                                        <table id="table_list"></table>
                                    </div>
                                </div>
                            </div>
                            <!-- End Example Card View -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script th:src="@{/js/common/jquery.min.js}"></script>
<script th:src="@{/js/common/bootstrap.min.js}"></script>
<script th:src="@{/js/common/content.js}"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>

<!-- Peity -->
<script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>

<script th:src="@{/js/plugins/layer/layer.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>
<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {
        //初始化表格,动态从服务器加载数据
        $("#table_list").bootstrapTable({
            //使用get请求到服务器获取数据
            method: "GET",
            //必须设置，不然request.getParameter获取不到请求参数
            contentType: "application/x-www-form-urlencoded",
            //获取数据的Servlet地址
            url: "/codeGenerate/list",
            //表格显示条纹
            striped: true,
            //启动分页
            pagination: true,
            //每页显示的记录数
            pageSize: 7,
            //当前第几页
            pageNumber: 1,
            //记录数可选列表,可以在底部设置每一页可以侠士多少条数据，和pageSize配合使用
            pageList: [5, 10, 15, 20, 25],
            //是否显示刷新按钮
            showRefresh: true,
            //是否启用查询
            search: false,
            //是否启用详细信息视图
            detailView: false,
            //表示服务端请求
            sidePagination: "server",
            sortName: "id",
            sortOrder: "asc",
            sortable: 'true',
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: function (params) {
                var tableName = $("#tableName").val();
                return {
                    pageSize: params.pageSize,                     // 每页记录条数
                    pageNumber: params.pageNumber,
                    // 当前页索引
                    tableName: tableName,
                };
            },
            toolbar: "#toolbar",
            //设置true 将在点击行时，自动选择rediobox 和 checkbox,自动勾选checkbox
            clickToSelect: true,
            showToggle: true, //1，注意这里必须设置true，onToggle事件才会生效
            onToggle: function (cardView) {
                // alert(JSON.stringify(cardView));
            },
            //json数据解析
            responseHandler: function (res) {
                return {
                    "rows": res.result.records,
                    "total": res.result.total
                };
            },
            //数据列
            columns: [
                //显示checkbox
                {
                    checkbox: true
                },
                {
                    title: "表名",
                    field: "tableName",
                    sortable: true,
                    titleTooltip: '提示文本',
                    align: 'center',
                    valign: 'middle',
                    halign: 'center',
                    falign: 'center'
                },
                {
                    title: "表描述",
                    field: "tableComment",
                    sortable: true,
                    titleTooltip: '提示文本',
                    align: 'center',
                    valign: 'middle',
                    halign: 'center',
                    falign: 'center'
                }
                ]
        });
    });
</script>
<script>
    function getSelects(){
        return $("#table_list").bootstrapTable("getSelections");
    }
</script>


</body>
</html>
